<template>
    <div class="card-box">
        <div style="padding-bottom: 15px" class="page-box">
            <el-form v-model="item" class="form-wrap" :rules="rules">
                <div class="data-title full mb12" >基本信息</div>
                <el-form-item label="模板名称"  style="width: 40%">
                    <el-input v-model="item.templateName"></el-input>
                </el-form-item>
                <el-form-item label="适用项目"  style="width: 40%">
                    <el-input v-model="item.project"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="page-box" >
            <el-row class="">
                <span style="font-size: 18px">单据痕迹：</span>原单
            </el-row>
            <el-row style="text-align: center;padding-bottom: 20px">
                <span style="font-size: 30px">福田物业</span>
            </el-row>
            <el-row class="row" style="text-align: right">
                <span>NO:</span><el-input v-model="item.financeManageReceiptDetailVO.receiptNum" type="text" style="width: 10%"></el-input>
            </el-row>
            <el-row class="row">
                <el-col :span="8">
                    <span>客户：</span><el-input v-model="item.financeManageReceiptDetailVO.client" type="text" style="width: 30%"></el-input>
                </el-col>
                <el-col :span="8" style="text-align: center">
                    <span>房间：</span><el-input type="text" v-model="item.financeManageReceiptDetailVO.room" style="width: 30%"></el-input>
                </el-col>
                <el-col :span="8" style="text-align: right">
                    <span>时间：</span>
                    <el-date-picker
                        v-model="item.financeManageReceiptDetailVO.printDate"
                        type="date"

                        style="width: 50%"></el-date-picker>
                </el-col>
            </el-row>
            <el-row style="padding:10px 0;text-align: right"><el-button type="primary" size="small" @click="addchild">新增</el-button></el-row>
            <el-table :data="item.financeManageReceiptDetailVO.financeManageReceiptPayments " show-summary="true" class="data-info">
                <el-table-column label="序号" type="index" :index="indexMethod" width="80"></el-table-column>
                <el-table-column label="款项" prop="fund">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.fund"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="摘要" prop="digest" >
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.digest"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="费用期间" width="180" prop="costDate">
                    <template slot-scope="scope">
                        <el-date-picker type="date"
                                        value-format="yyyy-MM-dd"
                                        format="yyyy-MM-dd"
                                        v-model="scope.row.costDate"></el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column label="单价" prop="unitPrice">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.unitPrice"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="数量" prop="number">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="本金" prop="capital">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.capital"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="违约金" prop="deditPrice">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.deditPrice"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="合计" prop="summation">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.summation"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row class="row">
                <el-col :span="6">
                    <span>收款人：</span><el-input v-model="item.financeManageReceiptDetailVO.payee" type="text" style="width: 40%"></el-input>
                </el-col>
                <el-col :span="6">
                    <span>交款日期：</span>
                    <el-date-picker
                        type="date"

                        v-model="item.financeManageReceiptDetailVO.paymentDate"
                        style="width: 50%"></el-date-picker>
                </el-col>
                <el-col :span="6">
                    <span>交款人（签字）：</span><el-input v-model="item.financeManageReceiptDetailVO.payer"  type="text" style="width: 30%"></el-input>
                </el-col>
                <el-col :span="6">
                    <span>打印日期：</span>
                    <el-date-picker
                        type="date"
                        value-format="yyyy-MM-dd"
                        v-model="item.financeManageReceiptDetailVO.printDate"
                        style="width: 50%">
                    </el-date-picker>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <span>代收单位盖章：</span><label></label>
                </el-col>
                <el-col :span="4">
                    <span>打印人：</span><el-input type="text" v-model="item.financeManageReceiptDetailVO.printer" style="width: 50%"></el-input>
                </el-col>
                <el-col :span="4">
                    <span>打印次数：</span><el-input type="text" v-model="item.financeManageReceiptDetailVO.printNum" style="width: 50%"></el-input>
                </el-col>
            </el-row>
        </div>
        <div style="text-align: right" class="page-box">
            <el-button type="primary" size="small" @click="commit">提 交</el-button>
        </div>
    </div>
</template>

<script>
    import {putObj,addObj} from '../../../api/finance-manage-receipt'
    export default {
        name: "edit-data",
        mounted(){
            this.show()
        },
        data(){
            return{
                item:{
                    templateName:'',
                    project:'',
                    financeManageReceiptDetailVO:{
                        receiptNum:'',
                        client:'',
                        room:'',
                        payee:'',
                        paymentDate:'',
                        payer:'',
                        printDate:'',
                        printer:'',
                        printNum:'',
                        financeManageReceiptPayments:[{
                            fund:'',
                            digest:'',
                            costDate:'',
                            unitPrice:'',
                            number:'',
                            capital:'',
                            deditPrice:'',
                            summation:''
                        }]
                    },

                },
                isEdit:'',
                rules:{
                    templateName: [{required: true, message: '请输入模板名称', trigger: 'blur'}],
                    project: [{required: true, message: '请输入适用项目', trigger: 'blur'}],
                }
            }
        },
        methods:{
            show(){
                let data=this.$route.query
                if(JSON.stringify(data)!='{}'){
                    this.isEdit=true
                    this.item=data
                    console.log(JSON.stringify(data.financeManageReceiptDetailVO))
                }else {
                    this.isEdit=false
                }
            },
            commit(){
                if(this.isEdit){
                    putObj(this.item).then(res=>{
                        this.suc('修改成功')
                        this.$router.push({
                            path:'/wy-finance/charge-set/receipt-project/list'
                        })
                    })
                }else {
                    addObj(this.item).then(res=>{
                        this.suc('添加成功')
                        this.$router.push({
                            path:'/wy-finance/charge-set/receipt-project/list'
                        })
                    })
                }
            },
            indexMethod(index) {
                return index+1;
            },
            handleDelete(index){
                this.item.financeManageReceiptDetailVO.financeManageReceiptPayments.splice(index,1)
            },
            addchild(){
                this.item.financeManageReceiptDetailVO.financeManageReceiptPayments.push({
                    fund:'',
                    digest:'',
                    costDate:'',
                    unitPrice:'',
                    number:'',
                    capital:'',
                    deditPrice:'',
                    summation:''
                })
            }

        }
    }
</script>

<style lang='scss' scoped>
    
    @include data-title();
    @include info-list();
    @include formWrap(3);
</style>
